<template>
	<view class="li-statistics-cards">
		<block v-for="(item, index) in cd" :key="index">
			<block v-if="item.type == 1">
				<view class="justify-around">
					<view class="flex-column" v-for="(card, idx) in item.list" :key="idx">
						<view class="item-big-title">{{ card.text }}</view>
						<view class="item-big-content">{{ card.value }}</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="flex">
					<view style="width: 50%" v-for="(card, idx) in item.list" :key="idx">
						<view style="display: flex; align-items: center; justify-content: center; flex-direction: column">
							<view class="item-title">{{ card.text }}</view>
							<view class="item-content">{{ card.value }}</view>
						</view>
					</view>
				</view>
				<u-gap v-if="cd.length - 1 != index" height="1" bgColor="#f1f1f1" />
			</block>
		</block>
	</view>
</template>

<script>
export default {
	name: 'LiStatisticsCards',
	props: {
		cd: {
			required: true
		}
	}
};
</script>

<style lang="scss" scoped>
.li-statistics-cards {
	background: #fff;
	border-radius: 8px;
	padding: 30rpx;

	.justify-around {
		display: flex;
		justify-content: space-around;
	}

	.flex-column {
		display: flex;
		width: 50%;
		padding: 30rpx 0;
		padding-top: 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item-title {
		font-size: 12px;
		margin: 8px;
	}

	.item-big-title {
		font-size: 16px;
	}

	.item-big-content {
		color: #f3c45d;
		margin-top: 5px;
		font-size: 14px;
		text-align: center;
	}

	.item-content {
		margin-bottom: 8px;
		margin-top: 5px;
		font-size: 12px;
		text-align: center;
	}
}
</style>
